<template>
  <div>
    <div class="app-container" v-if="showHome">
      <div class="top-box">
        <img src="@/assets/images/gzx.png" class="logo" />
        <span>工作项</span>
      </div>
      <div class="tabs-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in tablist" :label='item.label + " (" +item.num + ")"' :name="item.id" :key="index">
            <div class="operation" style="margin-bottom: 30px">
              <span class="text1">
                共<span class="red-text">{{ item.num }}</span>个工作项
              </span>
              <div class="right">
                <div class="query-box">
                  <span class="label">归属项目</span>
                  <el-select v-model="queryParams.cProNme" style="width: 227px" placeholder="选择归属项目" @change="handleQuery">
                    <el-option
                      v-for="item in ascriptionOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="queryParams.cPmType" style="width: 129px;margin: 0 15px" placeholder="选择工作项类型" @change="handleQuery">
                    <el-option
                      v-for="item in workTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-input
                    class="input"
                    placeholder="查工作项名称"
                    prefix-icon="el-icon-search"
                    @blur="handleQuery"
                    v-model="queryParams.cPmNme">
                  </el-input>
                </div>
                <el-dropdown @command="handleCommand">
                  <div class="el-dropdown-link">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">批量导出</el-dropdown-item>
                    <el-dropdown-item command="2">批量删除</el-dropdown-item>
                    <el-dropdown-item command="3">批量复制</el-dropdown-item>
                    <el-dropdown-item command="4">批量更改</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <el-table
              v-loading="loading"
              :header-cell-style="{
              'background-color': '#F9F9F9'
            }"
              :data="configList"
              @selection-change="handleSelectionChange"
              border
              :row-class-name="tableClass">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="工作项名称" align="left" prop="cPmNme" sortable width="230">
                <template slot-scope="scope">
                  <img src="@/assets/images/xq-xz.png" class="icon img-correct" />{{ scope.row.cPmNme }}
                </template>
              </el-table-column>
              <el-table-column label="工作项类型" align="center" prop="cPmType" width="100">
                <template slot-scope="scope">
                  需求
                </template>
              </el-table-column>
              <el-table-column label="优先级" align="center" prop="cPmPri" width="100">
                <template slot-scope="scope">
                  <div class="highest" v-if="scope.row.cPmPri == 1">
                    <div class="icon red2"></div>最高
                  </div>
                  <div class="highest" v-if="scope.row.cPmPri == 2">
                    <div class="icon orange"></div>较高
                  </div>
                  <div class="highest" v-if="scope.row.cPmPri == 3">
                    <div class="icon blue"></div>普通
                  </div>
                  <div class="highest" v-if="scope.row.cPmPri == 4">
                    <div class="icon gray"></div>较低
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" prop="cPmState" width="100">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cPmState == 1" class="primary">测试提交</el-tag>
                  <el-tag v-if="scope.row.cPmState == 2" type="warning">进行中</el-tag>
                  <el-tag v-if="scope.row.cPmState == 3" type="success">测试通过</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="归属项目" align="center" prop="cProNme" width="220" />
              <el-table-column label="创建人" align="center" prop="cCrePer" width="120">
                <template slot-scope="scope">
                <span v-if="scope.row.cCrePerNme">
                  <span class="icon-name red">{{ scope.row.cCrePerNme[scope.row.cCrePerNme.length - 1] }}</span>
                  <span>{{ scope.row.cCrePerNme }}</span>
                </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="tCreTm" sortable>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.tCreTm) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="更新时间" align="center" prop="tUpdTm" sortable>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.tUpdTm) }}</span>
                </template>
              </el-table-column>
<!--              <el-table-column label="预估工时/剩余工时" align="center" prop="cEstRemWork" sortable>-->
<!--                <template slot-scope="scope">-->
<!--                <span>-->
<!--                  {{ scope.row.cEstRemWork }}-->
<!--                  <i class="el-icon-edit" style="cursor: pointer;margin-left: 15px" @click="emitWorkTime(scope.row)"></i>-->
<!--                </span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="操作" width="160" align="center" header-align="left" class-name="small-padding fixed-width">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button-->
<!--                    size="mini"-->
<!--                    @click="handleUpdate(scope.row, 'check')"-->
<!--                  >查看</el-button>-->
<!--                  <el-dropdown @command="handleCommand2">-->
<!--                    <el-button-->
<!--                      class="el-dropdown-link"-->
<!--                      size="mini"-->
<!--                      @click="handleDelete(scope.row)"-->
<!--                    >删除<i class="el-icon-arrow-down" style="margin-left: 10px"></i></el-button>-->
<!--                    <el-dropdown-menu slot="dropdown" >-->
<!--                      <el-dropdown-item command="1">编辑</el-dropdown-item>-->
<!--                    </el-dropdown-menu>-->
<!--                  </el-dropdown>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
            <pagination
              :total="total"
              :current-page="queryParams.pageNum"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @pagination="currentChang"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <edit-work-time ref="workTime" @emitWork="handleSetWork"  />
  </div>
</template>

<script>
import {list,listNum} from "@/api/projectManage/workItem";
import EditWorkTime from "@/views/projectManage/membership/addUser";
import {emitList} from "@/api/projectManage/demand";
import {mixin} from "@/views/projectManage/mixin";
export default {
  components: {EditWorkTime},
  mixins: [mixin],
  data() {
    return {
      workTypeOption: [
        {
          label: '全部工作项',
          value: 1
        },
        {
          label: '需求',
          value: 2
        },
        {
          label: '任务',
          value: 3
        },
        {
          label: '缺陷',
          value: 4
        }
      ],
      ascriptionOption: [
        {
          label: '全部',
          value: 1
        },
      ],
      configList: [],
      loading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      activeName: '3',
      tablist: [
        {
          label: '我负责的',
          num: 0,
          id: '3'
        },
        {
          label: '我创建的',
          num: 0,
          id: '2'
        },
        {
          label: '我参与的',
          num: 0,
          id: '1'
        }
      ],
      showHome: true
    }
  },
  mounted() {
    this.getList()
    this.getListNum()
  },
  methods: {
    // 请求列表
    getList() {
      this.configList = []
      const params = {
        cType: this.activeName,
        ...this.queryParams
      }
      this.loading = true
      list(params).then(res => {
        this.configList = res.rows || []
        this.total = res.total || 0
      }).finally(() => this.loading = false)
    },
    // 查询工作项数量
    getListNum() {
      this.loading = true
      listNum().then(res => {
        this.tablist[2].num = res.countProject
        this.tablist[1].num = res.countCreate
        this.tablist[0].num = res.countHead
      }).finally(() => this.loading = false)
    },
    // 分页
    currentChang(val) {
      this.queryParams.pageNum = val.page
      this.queryParams.pageSize = val.limit
      this.getList()
    },
    // 修改工时
    emitWorkTime(row) {
      this.$refs.workTime.open(row)
    },
    // 设置工时
    handleSetWork(row) {
      emitList(row).then(res => {
        this.$notify({title: '成功', message: '保存成功！', type: 'success',})
        this.getList()
      })
    },
    // 操作删除更多按钮
    handleCommand2(command) {
      console.log(command)
    },
    // 查看/编辑
    handleUpdate(row, type) {
      // this.$refs.upDateForm.open({
      //  row, type
      // })
    },
    // 查询
    handleQuery() {
      const {cProNme, cPmType, cPmNme} = this.queryParams
      if (cProNme || cPmType || cPmNme) this.getList()
    },
    // 打开项目概览
    openProject(row) {

    },
    // 删除
    handleDelete() {

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection)
    },
    // 切换项目状态
    handleClick() {
      console.log(this.activeName)
      this.getList()
    },
    // 更多操作
    handleCommand(command) {
      console.log(command)
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/projectManage";
</style>
